import React from 'react'
import Sider from "./Sider"
import Header from "./Header"
import Content from "./Content"
import { Layout } from 'antd';
import Home from "../pages/home"

export default class SiderDemo extends React.Component {
    state = {
        collapsed: false,
        routeInfo: {
            path: '/home',
            component: Home
        }
    };

    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };

    getNowPath = (route) => {
        this.setState({
            routeInfo: route
        })
    }

    render() {
        return (
            <Layout style={{ "height": "100%" }}>
                {/* 左侧菜单 */}
                <Sider collapsed={this.state.collapsed} getNowPath={this.getNowPath}></Sider>
                {/* 右侧区域 */}
                <Layout className="site-layout">
                    {/* 顶部导航 */}
                    <Header collapsed={this.state.collapsed} toggle={this.toggle}></Header>
                    {/* 右侧显示区域 */}
                    <Content routeInfo={this.state.routeInfo}></Content>
                </Layout>
            </Layout>
        );
    }
}
